<template>
	<div class="content">
		<van-nav-bar
			fixed
			left-arrow
			left-text="返回"
			placeholder
			:title="true ? '设置密码' : '验证密码'"
		></van-nav-bar>

		<div class="user-info flex-center">
			<div class="flex-column">
				<van-image
					round
					lazy-load
					width="100"
					height="100"
					src="https://img.yzcdn.cn/vant/cat.jpeg"
				/>
				<p class="text-center text-bold px16">{{ userName }}</p>
			</div>
		</div>
		<!-- 密码输入框 -->
		<div class="pwd-input">
			<p class="pwd-title text-center px14">
				<van-icon name="lock" />
				{{ step === 1 ? '请输入4位数字密码' : '再次输入密码' }}
			</p>
			<van-password-input
				:value="value"
				:length="4"
				:gutter="15"
				:focused="showKeyboard"
				@focus="showKeyboard = true"
			/>
			<router-link class="forget-pwd fr px12" to="/forgetPassword">忘记密码？</router-link>
		</div>

		<div class="pwd-btn">
			<van-button
				square
				size="large"
				type="primary"
				@click="handleClick"
				:disabled="value.length < 4"
				:color="value !== '' ? '#4a6573' : '#969696'"
			>
				{{ step === 1 ? '下一步' : '完成' }}
			</van-button>
		</div>
		<!-- 数字键盘 -->
		<van-number-keyboard
			extra-key="."
			theme="custom"
			close-button-text="完成"
			safe-area-inset-bottom
			:show="showKeyboard"
			:hide-on-click-outside="false"
			@blur="onBlur"
			@input="onInput"
			@close="onClose"
			@delete="onDelete"
		/>
	</div>
</template>

<script>
// @ is an alias to /src
import hash from 'object-hash'
export default {
	name: 'Password',
	components: {},
	data() {
		return {
			value: '',
			value2: '',
			step: 1,
			userName: '张三',
			showKeyboard: true
		}
	},
	computed: {
		password() {
			return hash.MD5(this.value)
		}
	},
	mounted() {
		// this.wxInit()
	},
	activated() {
		this.value = ''
		this.value2 = ''
		this.step = 1
		// this.wxInit()
	},
	methods: {
		wxInit() {
			wx.config({
				beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: '', // 必填，企业微信的corpID
				timestamp: '', // 必填，生成签名的时间戳
				nonceStr: '', // 必填，生成签名的随机串
				signature: '', // 必填，签名，见 附录-JS-SDK使用权限签名算法
				jsApiList: ['checkJsApi'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
			})
			this.$nextTick(() => {
				wx.ready(() => {
					// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
				})
				wx.error(res => {
					console.log(res)

					// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
				})
			})
		},
		onInput(key) {
			this.value = (this.value + key).slice(0, 4)
		},
		onDelete() {
			this.value = this.value.slice(0, this.value.length - 1)
		},
		onBlur() {
			this.showKeyboard = false
		},
		onClose() {
			if (this.value.length >= 4) {
				// this.handleClick()
			}
		},
		handleClick() {
			if (this.step === 1) {
				this.step++
				this.value2 = this.value
				this.value = ''
				this.showKeyboard = true
			} else if (this.value2 !== this.value) {
				this.$toast('两次密码不一致，请重新输入')
				this.step = 1
				this.value = ''
				this.value2 = ''
			} else {
				console.log(this.password)
				this.$router.push({ name: 'PaySlipContent' })
			}
		}
	}
}
</script>

<style lang="less" scoped>
.content {
	overflow: hidden;
	.user-info {
		margin: 30px auto;
		.text-center {
			margin-top: 8px;
		}
	}
	.pwd-input {
		.van-password-input__security li {
			background-color: #f2f2f2;
			border: #bfbfbf solid 1px;
			border-radius: 4px;
		}
		width: 80vw;
		margin: 10px auto;
		.pwd-title {
			margin: 10px auto;
		}
		.forget-pwd {
			margin: 10px;
		}
	}
	.pwd-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
}
</style>
